<template>
  <div class="index-search-box">
    <img src="./img/slogan.png" alt="" class="slogan" />
    <div class="search-box">
      <input type="text" placeholder="输入关键字搜索">
      <button type="button"></button>
    </div>
    <div class="hot-link">
      <router-link to="/categorySearch">分类浏览</router-link>
      <router-link to="/moreSearch">高级搜索</router-link>
      <router-link to="/">地图搜索</router-link>
    </div>
  </div>
</template>

<style scoped lang="less">
  .index-search-box{
    position: absolute;
    width: 90%;
    max-width: 800px;
    height: auto;
    left: 50%;
    transform: translate(-50%,0);
    margin-top: -200px;
    top: 50%;
    .slogan{
      display: block;
      width: 98%;
      max-width: 700px;
      margin: 0 auto;
    }
    .hot-link{
      width: 6.5rem;
      margin: 0 auto;
      a{
        display: inline-block;
        vertical-align: top;
        line-height: 1.2;
        margin-right: 10px;
        font-size: .32rem;
        color: #392e2c;
        text-decoration: underline;
      }
      @media(min-width: 768px){
        width: 95%;
        margin: 0 auto;
        max-width: 720px;
        a{
          font-size: 20px;
          margin-right: 15px;
          letter-spacing: 1px;
        }
      }
    }
    .search-box{
      width: 6.5rem;
      height: .64rem;
      margin: .2rem auto;
      display: flex;
      input{
        flex-grow: 1;
        height: .64rem;
        box-sizing: border-box;
        background: #fff1e1;
        line-height: .64rem;
        padding-left: 10px;
        font-size: .32rem;
        flex-shrink: 1;
      }
      button{
        width: 1.24rem;
        flex-shrink: 0;
        height: .64rem;
        background-size: 100% 100%;
        background-image: url("./img/btn.png");
        margin-left: 10px;
      }
      @media(min-width: 768px){
        width: 95%;
        height: 50px;
        margin: 30px auto;
        display: flex;
        max-width: 720px;
        input{
          flex-grow: 1;
          height: 50px;
          box-sizing: border-box;
          background: #fff1e1;
          line-height: 50px;
          padding-left: 10px;
          font-size: 18px;
          flex-shrink: 1;
        }
        button{
          width: 100px;
          flex-shrink: 0;
          height: 50px;
          margin-left: 10px;
        }
      }
    }
  }
</style>
